<template>
  <!--搜索条件-->
  <template v-for="(item, index) in queryJson" :key="index">
    <el-form-item
        v-if="item.isShow"
        :label="item.label"
        :style="item.width ? { width: item.width + 'px' } : {}"
    >
      <template v-if="item.queryMode === 'between'">
        <div v-if="item.type.value === 'number'">
          <el-input-number v-model="data[item.field + 'Start']" /> 到
          <el-input-number v-model="data[item.field + 'End']" />
        </div>
        <div v-else-if="item.type.value === 'date'">
          <el-date-picker
              v-if="item.type.value === 'date'"
              v-model="data.extend[item.field]"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              style="width: 200px"
          />
        </div>
        <div v-else-if="item.type.value === 'datetime'">
          <el-date-picker
              v-model="data.extend[item.field]"
              value-format="YYYY-MM-DD hh:mm:ss"
              type="datetimerange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              style="width: 310px"
          />
        </div>
        <div v-else-if="item.type.value === 'time'">
          <el-time-picker
              v-model="data.extend[item.field]"
              value-format="hh:mm:ss"
              is-range
              range-separator="To"
              start-placeholder="Start time"
              end-placeholder="End time"
              style="width: 200px"
          />
        </div>
      </template>
      <template v-else>
        <el-input v-if="item.type.value === 'text'" v-model="data[item.field]" clearable />
        <el-input-number v-else-if="item.type.value === 'number'" v-model="data[item.field]" />
        <el-date-picker
            v-else-if="item.type.value === 'date'"
            v-model="data[item.field]"
            type="date"
            style="width: 115px"
        />
        <el-date-picker
            v-else-if="item.type.value === 'datetime'"
            v-model="data[item.field]"
            type="datetime"
            style="width: 145px"
        />
        <el-time-picker
            v-else-if="item.type.value === 'time'"
            v-model="data[item.field]"
            style="width: 115px"
        />
        <el-switch v-else-if="item.type.value === 'switch'" v-model="data[item.field]" />
        <div v-else-if="item.type.value === 'select'">
          <template v-if="optionDatas[item.type.select.optionId]">
            <!-- 树形选项 -->
            <el-tree-select
                v-if="item.type.select.tree"
                v-model="data.extend[item.field]"
                :data="optionDatas[item.type.select.optionId].options"
                :multiple="item.type.select.multiple"
                :render-after-expand="false"
                :style="
                item.width
                  ? { width: item.width - (item.label.length + 1) * 12 + 'px' }
                  : { width: '160px' }
              "
                show-checkbox
                collapse-tags
                collapse-tags-tooltip
                clearable
            />
            <el-select
                v-else
                v-model="data.extend[item.field]"
                :multiple="item.type.select.multiple"
                filterable
                placeholder="Select"
                size="small"
                :style="
                item.width
                  ? { width: item.width - (item.label.length + 1) * 12 + 'px' }
                  : { width: '160px' }
              "
                collapse-tags
                collapse-tags-tooltip
                clearable
            >
              <el-option
                  v-for="(item, index) in optionDatas[item.type.select.optionId].options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
        </div>
      </template>
    </el-form-item>
  </template>

  <slot name="query"> </slot>
</template>
<script setup>
import { useOptionDataStore } from '@/stores/optionData'
import { storeToRefs } from 'pinia'
const { optionDatas } = storeToRefs(useOptionDataStore())
const data = defineModel()
const props = defineProps(['queryJson'])
const queryJson = props.queryJson
</script>
